<template>
  <!-- 确定订单 -->
  <div class="confirm">
    <div class="tob">
      <div class="imgs" @click="fanh">
        <img src="../assets/syb.png" alt="" />
      </div>
      <div class="text">确定订单</div>
    </div>
    <div class="list">
      <div class="bodys">
        <!-- 地址模块 -->
        <div class="address" @click="toaddress">
          <div class="dingw">
            <img src="../assets/dw.png" alt="" />
          </div>
          <ul>
            <li>{{ address.addrets }}</li>
            <li>
              <div style="flex: 1">
                <span>{{ address.name }}：</span><span>{{ address.tel }}</span>
              </div>

              <div class="toliebiao">
                <img src="../assets/syb.png" alt="" />
              </div>
            </li>
          </ul>
        </div>

        <!-- 商品规格啥的 -->
        <div class="commodity" v-for="(item, index) in orders" :key="index">
          <ul class="commodityContna">
            <li class="commodityimg"><img :src="item.picUrl" alt="" /></li>
            <li class="commoditytext">
              <div class="text">
                <ul>
                  <li>{{ item.goodsName }}</li>
                  <li>
                    <div class="textGuge">
                      <span v-for="(i, x) in item.specifications" :key="x">{{
                        i
                      }}</span>
                    </div>
                  </li>
                  <li>
                    <div class="price">
                      价格:￥<span class="pricetext">{{ item.price }}</span>
                      数量:<span class="number">{{ item.number }}</span>
                    </div>
                  </li>
                  <li>
                    <div><span>免运费</span><span>运费险</span></div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import API from "../http/API";
import { Toast } from "vant";
import { SubmitBar } from "vant";
export default {
  name: "confirm",
  components: {
    [SubmitBar.name]: SubmitBar,
    [Toast.name]: Toast,
  },

  data() {
    return {
      // 没有进行动态更改的时候地址信息
      address: {
        addrets: "",
        id: "",
        isDefault: "",
        name: "",
        tel: "",
      },
      orders: [],
      // 价格
      price: 0,
      isRouterAlive: false,
      // 进行动态更改的时候
    };
  },
  created() {
    this.http();
    // this.order();
  },
  watch: {},
  methods: {
    fanh() {
      if (
        localStorage.getItem("minid") != "" ||
        localStorage.getItem("minid") != undefined
      ) {
        this.$post(API.POST_CART_DELETE, {
          token: this.$store.state.token,
          productIds: [localStorage.getItem("minid")],
        })
          .then((res) => {
            console.log(res);
            console.log("删除成功");
          })
          .catch((err) => {});
      }

      this.$router.go(-1);
    },

    toaddress() {
      this.$router.push("/sitellitile");
    },
    // 列表网络请求
    http() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });

      // 先看看vuex上面有没有数据
      console.log(this.$store.state.address);
      let address = this.$store.state.address;
      if (address.address != undefined) {
        // address: "天津市天津市和平区杭州市西湖区 黄龙万科中心"
        // id: 56
        // isDefault: false
        // name: "王二小"
        // tel: "18176957527"
        this.address.addrets = address.address;
        this.address.id = address.id;
        this.address.isDefault = address.isDefault;
        this.address.name = address.name;
        this.address.tel = address.tel;
        this.order();
        Toast.clear();
      } else {
        this.$get(API.GET_ADDRESS_SAVE, {
          params: {
            token: localStorage.getItem("token"),
          },
        }).then((res) => {
          Toast.clear();
          if (res.errmsg == "成功") {
            console.log(res);
            //直接处理数据拿到默认的列表
            for (let index = 0; index < res.data.list.length; index++) {
              if (res.data.list[index].isDefault) {
                console.log(res.data.list[index]);
                this.address.addrets =
                  res.data.list[index].city +
                  res.data.list[index].county +
                  res.data.list[index].county +
                  res.data.list[index].addressDetail;
                this.address.id = res.data.list[index].id;
                this.address.isDefault = res.data.list[index].isDefault;
                this.address.name = res.data.list[index].name;
                this.address.tel = res.data.list[index].tel;
                console.log(this.address);
              }
            }
          }
          // console.log(res);
        });
        // 请求选中的数据
        this.order();
      }
    },
    // 拿到商品规格数据
    order() {
      console.log(this.$route.params == "");

      // if (this.$route.params.name == undefined) {
      this.$get(API.GET_CART_INDEX, {
        token: localStorage.getItem("token"),
      }).then((res) => {
        console.log(res.data);

        this.price = res.data.cartTotal.checkedGoodsAmount * 100;
        for (let index = 0; index < res.data.cartList.length; index++) {
          // console.log(res.data.cartList);
          if (res.data.cartList[index].checked == true)
            this.orders.push(res.data.cartList[index]);
          // arr.push(res.data.cartList[index].productId);
        }

        console.log(this.orders);
      });
      // } else {
      console.log(this.$route.params.name);
      // // addTime: "2022-01-01 13:42:19"
      // checked: true
      // deleted: false
      // goodsId: 1006014
      // goodsName: "双宫茧桑蚕丝被 子母被"
      // goodsSn: "1006014"
      // id: 1127
      // number: 1
      // picUrl: "http://yanxuan.nosdn.127.net/2b537159f0f789034bf8c4b339c43750.png"
      // price: 1399
      // productId: 11

      // 进行格式的处理因为格式我直接传过来的是那个规格单元的

      //  this.orders.push({
      //    goodsName: this.$route.params.name.selectedSkuComb.titlei,
      //    id: this.$route.params.name.selectedSkuComb.goods_id,
      //    productId:  this.$route.params.name.selectedSkuComb.id,
      //    price: this.$route.params.name.selectedSkuComb.price,
      //    number: this.$route.params.name.selectedNum,
      //    picUrl:this.$route.params.name.selectedSkuComb.url,
      //       addressId:this.$route.params.name.addressId,
      //       specifications:[]
      //  })

      // }
    },
    // 提交订单
    onSubmit() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "支付中",
      });

      // 手动清除 Toast

      this.$get(API.GET_CART_CHECKOUT, {
        //       ①封装 token
        // ②cartId：购物车 id
        // ③addressId：地址 id
        // ④couponId：传 0
        // ⑤userCouponId：传 0
        params: {
          token: localStorage.getItem("token"),
          cartId: 0,
          addressId: this.address.id,
          couponId: 0,
          userCouponId: 0,
        },
      }).then((res) => {
        if (res.errmsg == "成功") {
          console.log(res);
          //直接处理数据拿到默认的列表
          Toast.clear();

          this.$router.push({
            name: "conpayment",
            params: { shangping: res.data },
          });
        }
        // console.log(res);
      });
    },
  },

  // 'cart/delete', // 删除购物车的商品
  // 请求方式：post
  // 参数：
  // ①封装 token
  // ②productIds: 当前商品指定规格的商品 ID
};
</script>


<style lang="less" scoped>
.number {
  font-size: 16px;
  color: rgb(240, 111, 111);
}
.pricetext {
  font-size: 16px;
  color: rgb(240, 111, 111);
  margin-right: 5px;
}
.confirm {
  height: 100%;
  width: 100%;
  background-color: @background;
  // border: 1px solid #000;
  .tob {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
    height: 50px;
    display: flex;
    align-items: center;
    // .sj();
    .text {
      margin-left: 5px;
      margin-top: 3px;
      font-size: 17px;
    }
  }
  .imgs {
    width: 20px;
    height: 20px;
    // border: 1px solid #000;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .list {
    background-color: @background;
  }
  .bodys {
    padding-top: 60px;
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 60px;
    background-color: @background;
    // height: 100%;
    // background-color: rgb(255, 255, 255);
    .address {
      background-color: rgb(255, 255, 255);
      display: flex;

      //   height: 50px;
      align-items: center;
      border-radius: 5px;
      .dingw {
        margin-right: 5px;
        margin-left: 5px;
        height: 30px;
        width: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      ul {
        flex: 1;
        margin: 5px 5px 5px 5px;
        li {
          // height: 20px;
          line-height: 20px;
          // border: 1px solid #000;
          &:nth-child(1) {
            font-size: 16px;
            color: rgb(41, 41, 41);
          }
          &:nth-child(2) {
            font-size: 13px;
            color: rgb(97, 97, 97);
            display: flex;
            .toliebiao {
              width: 15px;
              height: 15px;
              transform: rotate(180deg);
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }

    // 商品规格
    .commodity {
      height: 100px;

      margin-top: 10px;
      background-color: rgb(255, 255, 255);
      border-radius: 5px;
      .commodityContna {
        .sj();
        height: 100%;
        // border: 1px solid #000;
        display: flex;
        align-items: center;

        .commodityimg {
          width: 90px;
          height: 90px;
          border-radius: 5px;
          // border: 1px solid #000;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .commoditytext {
          display: flex;
          flex: 1;
          // border: 1px solid #000;
          height: 90px;
          .text {
            margin-left: 5px;
            ul {
              height: 100%;
              display: flex;
              flex-direction: column;
              // justify-content: space-between;
              // justify-content: center;
              // justify-content: space-between;
              li {
                height: 20px;
                line-height: 20px;
                // border: 1px solid #000;
                &:nth-child(1) {
                  font-size: 17px;
                }
                &:nth-child(2) {
                  margin-top: 5px;
                  .textGuge {
                    color: rgb(116, 114, 114);
                    display: inline;
                    width: auto;
                    padding: 3px 3px 3px 3px;
                    border-radius: 3px;
                    background-color: rgba(201, 201, 201, 0.664);
                  }
                }
                &:nth-child(3) {
                  margin-top: 3px;
                  // .price {
                  // }
                }
                &:nth-child(4) {
                  margin-top: 2px;
                  div {
                    span {
                      color: rgb(250, 250, 250);
                      border-radius: 3px;
                      background-color: rgb(221, 101, 101);
                      padding: 3px 3px 3px 3px;

                      &:nth-child(1) {
                        margin-right: 5px;
                      }
                    }
                  }
                }
              }
            }
          }
          div {
            // height: 50px;
            // width: 50px;
            // border: 1px solid #000;
            &:nth-child(2) {
              width: 40px;
            }
            &:nth-child(1) {
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>